<template>
  <div class="login-container">
    <div class="header-cont">
      <div class="float-l logo">
        <img src="./login_icon.png" alt="">
      </div>
      <div class="float-l title">
        <span>人事管理系统</span>
      </div>

    </div>
    <div class="bottom-cont">
      <p>系统版权所有 @深圳四方精创资讯股份有限公司</p>
    </div>
    <login-dom></login-dom>
  </div>
</template>

<script>
// import { isvalidUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect'
import SocialSign from './socialsignin'
import { loginByUsername } from '@/beneform4j/api/login'
import LoginDom from './bf-login'

export default {
  components: {
    LangSelect,
    SocialSign,
    LoginDom },
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '222',
        password: '111111'
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' },
          { pattern: /[0-9A-Za-z_]+/, message: '输入字符只能为数字、字母或者下划线', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20个字符', trigger: 'blur' }
        ]
      },
      passwordType: 'password',
      loading: false,
      showDialog: false
    }
  },
  methods: {
    // 展示密码
    showPwd() {
    },
    // 提交登录
    handleLogin() {
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) { // 格式验证
      //     this.loading = true
      //     const username = this.loginForm.username.trim()
      //     loginByUsername(username, this.loginForm.password).then((response) => {
      //       this.loading = false
      //       if (response.success) {
      //         this.$store.dispatch('LoginByUsername', response.data).then(() => {
      //           this.$router.push({ path: '/' })
      //         })
      //       }
      //     }).catch(() => {
      //       this.loading = false
      //     })
      //   } else {
      //     this.$message({
      //       message: '输入的用户名或密码格式错误',
      //       type: 'error'
      //     })
      //     return false
      //   }
      // })
    },
    afterQRScan() {
    }
  },
  created() {
  },
  destroyed() {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style  scoped>

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
}
.bottom-cont{
  text-align: center;
  position: fixed;
  bottom: 0;
  height: 80px;
  line-height: 80px;
  color: #fff;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.bottom-cont>p{
  margin: 0;
}
.login-container{
  background: url('./login.jpg') no-repeat;
}
.header-cont{
  position: fixed;
  top: 0px;
  height: 80px;
  width: 100%;
  background: rgba(255, 255, 255, 0.16);
}
.header-cont>.logo{
  margin-left: 400px;
}
.header-cont>div{
  height: 40px;
  margin-top: 20px;
  line-height: 40px;
}
.header-cont>div>img{
  height: 100%;
}
.header-cont>div>span{
  font-size: 24px;
  font-weight: bold;
  margin-left: 20px;
  color: #222;
}
</style>
